<template>
	<view class="layout">

			<searchNavbar :parameter="parameter" :isMap="isMap" :openSysHeight="true" @search="search"></searchNavbar>
			<!-- 		<navTabFilter :categoryList="categoryList" @changeCategoryOn="changeCategoryOn" :categoryOn="categoryOn">
		</navTabFilter> -->
			<view class="acea-row row-middle nav-bg">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
					:scroll-left="tabLeft" show-scrollbar="true">
					<view class="item" :style='"width:"+isWidth+"px"' :data-index="index"
						:class="[index===categoryOn?'item-on':'']" v-for="(item,index) in categoryList" :key="index"
						:id="'id'+index" @click="categoryNavClick(item,index)">
						<view class="acea-row row-middle row-center img">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="acea-row row-middle type-bg">
				<view class="type" :class="typeOn==index?'type-on':''" v-for="(item,index) in types" :key="index"
					@click="typeNavClick(item,index)">
					{{item.name}}
				</view>
			</view>
			<view style="padding: 0 32rpx;flex: 1;overflow: auto;">
				<sypply-service v-if="types[typeOn].status == 0" :list="datalist"></sypply-service>
				<askSupply v-else :list="datalist" />
				<u-loading-icon :show="moreShow"></u-loading-icon>
				<!-- <u-loading-page :loading="loading"></u-loading-page> -->
				<view class='loadingicon acea-row row-center row-middle'>
					<text class='loading iconfont icon-jiazai' :hidden='!loading'></text>{{loadTitle}}
				</view>
			</view>
		<!-- 广告位 -->
		<!-- 		<view class="adver">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
				indicator-active-color="#ddd">
				<swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- <view :style="'height:' + navH + 'rpx'"></view> -->
		<!-- 		<view class="uni-p-b-98">

		</view> -->
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import tabNav from "@/components/tabNav";
	import navTabFilter from '../components/navTabFilter/navTabFilter.vue'
	import dropdownScreen from '../components/dropdown-merService/dropdown-merService'
	import searchNavbar from '../components/searchNavbar/searchNavbar.vue'
	import sypplyService from '@/components/listItems/sypplyService.vue'
	import askSupply from '@/components/listItems/askSupply.vue'

	import {
		getSuppleList,
		getSuppleBegList
	} from "@/api/api.js";
	import {
		getMerchantList
	} from '@/api/service.js'
	import {
		getclassificationListApi
	} from '@/api/brand/index.js'
	import {
		toPage
	} from '@/filters/commFilter.js'
	import parse from "../../../subpackageuni/uview-ui/libs/config/props/parse";
	const app = getApp();
	export default {
		components: {
			tabNav,
			navTabFilter,
			dropdownScreen,
			searchNavbar,
			sypplyService,
			askSupply
		},
		data() {
			return {
				hideModel: false,
				statusBarHeight: statusBarHeight,
				showProvider: false,
				isWidth: 42,
				isLeft: 0,
				tabLeft: 0,
				isMap: false,
				types: [
				{
					name: '供应链',
					status: 0
				}, {
					name: '求供应链',
					status: 1
				}],
				typeOn: 0,
				categoryList: [],
				categoryOn: 0,
				serviceCate: '', //服务类别
				serviceTitle: '', //标题
				servicePoint: '', //服务特色
				servicePrice: '', //服务价格
				serviceAddress: '', //服务地址
				contactList: [1, 2],
				supplementText: '', //补充详情
				maxLength: 200,
				datalist: [],
				loading: true,
				page: 1,
				totalPage: 0,
				moreShow: false,
				loadTitle: '',
				parameter: {
					placeholder: '搜索供应链',
					return: 1,
					categoryType: 4
				},
				cityId: '',
				keyWord: ''
			};
		},
		watch: {
			categoryOn(val) {
				let index = val
				if (this.categoryList.length >= 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.$nextTick(() => {
						this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
						console.log('this.tabLeft', this.tabLeft)
					})
				}
			},

		},
		beforeMount: function() {
			this.navH = app.globalData.navHeight
		},
		onLoad(options) {
			var that = this;
			that.categoryOn = options.index;


		},
		created() {
			var that = this
			this.cityId = this.$city
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 7
				}
			})
			this.getTypeList();
		},
		methods: {
			toPage,
			//获取列表
			async getList() {
				try {
					this.loadTitle = ''
					if (this.page == 1) {
						this.datalist = []
					}
					let t = this.types[this.typeOn].status;
					let params = {
						category: this.categoryList[this.categoryOn].id,
						city: this.$city,
						page: this.page,
						limit: 10,
					}
					if (this.keyWord) {
						params.commodityName = this.keyWord
					}
					let {
						data
					} = t == 0? await getSuppleList(params): await getSuppleBegList(params);
					this.totalPage = data.totalPage;
					data.list = data.list ? data.list.map(item => {
						item.imaegs = item.imaegs ? item.imaegs : this.$noImageShow;
						return item;
					}) : [];
					if (this.page == 1) {
						this.datalist = data.list;
						if (this.datalist.length <= 0) {
							this.loadTitle = '暂无数据'
						}
					} else {
						this.datalist = this.datalist.concat(data.list);
						if (res.data.list.length <= 0) {
							this.loadTitle = '已加载所有'
						}
					}
					this.loading = false;
					this.moreShow = false;
				} catch (e) {
					console.log(e)
					this.loading = false;
					this.moreShow = false;
					this.loadTitle = '暂无数据'
					//TODO handle the exception
				}
			},
			search(key) {
				this.keyWord = key;
				this.page = 1;
				this.getList()
			},
			//服务类别
			async getTypeList() {
				let that = this;
				try {
					let res = await getclassificationListApi({
						limit: 9999
					});
					console.log('iconList', res.data)
					this.categoryList = res.data;
					this.$nextTick(() => {
						that.categoryOn = Number(that.categoryOn);
						that.getList()
					})

				} catch (e) {
					//TODO handle the exception
				}
			},
			typeNavClick(item, index) {
				// let title = '发布-'+this.categoryList[this.categoryOn].name+item.name
				// uni.setNavigationBarTitle({
				// 	title:title
				// })
				this.parameter.categoryType = index == 0? 4: 11
				this.typeOn = index
				this.loading = true;
				this.page = 1;
				this.getList()
			},
			// 导航栏点击
			categoryNavClick(item, index) {
				if (index == 5 || index == 6) {
					let title = '发布-供应链-' + item.name
					uni.setNavigationBarTitle({
						title: title
					})
				} else {
					let title = '发布-求购供应链'
					uni.setNavigationBarTitle({
						title: title
					})
				}

				if (this.categoryList.length > 6) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				this.loading = true
				this.getList()
			},
			back() {
				uni.navigateBack()
			},
			changeCategoryOn(on) {
				this.categoryOn = on;
			},
			changeCity(cityId) {

			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.layout {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scroll {
			overflow-y: auto;
			padding-bottom: 35rpx;
			flex: 1;

			.scroll-Y {
				height: 100%;
			}
		}

	}

	.nav-bg {
		.layout {
			display: flex;
			flex-direction: column;
			height: 100vh;

			.scroll {
				overflow-y: auto;
				padding-bottom: 35rpx;
				flex: 1;

				.scroll-Y {
					height: 100%;
				}
			}

		}

		background: #ffffff;
		padding: 18rpx 30rpx 36rpx;

		// overflow-x: scroll;
		// white-space: normal!important;
		.item~.item {
			margin-left: 36rpx;
		}

		.item.item-mr-l {
			margin-left: 24rpx;
		}

		// .item:nth-child(5)~.item{
		// 	margin-left: 24rpx;
		// }
		.item {
			display: inline-block;
			white-space: nowrap;

			.img {
				margin: 0 auto;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: #ffffff;

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.name {
				// width: 108rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
		}

		.item-on {
			.img {
				background: rgba(247, 247, 247, 1);
			}

			.name {
				color: rgba(239, 39, 50, 1);
			}
		}
	}

	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}

	.header-top {
		height: 88rpx;
		display: flex;
		align-items: center;
		background: rgba(238, 33, 45, 1);
		padding: 0rpx 30rpx;

		.header-top-tittle {
			font-size: 36rpx;
			color: rgba(255, 255, 255, 1);
		}
	}

	.sys-head {
		width: 100%;
		background: #EE212D;
	}

	.fixed-top {
		width: 100%;
		// height: 210rpx;
		background: #EE212D;
		// position: fixed;
		// position: sticky;
		// top: 0;
		// top:calc(88rpx + constant(safe-area-inset-top));
		// top:calc(88rpx + env(safe-area-inset-top));
		// left: 0;
		// z-index: 999;
	}

	.search-header {
		width: 100%;
		// padding: 26rpx;
		background: #EE212D;

		.search-map {
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;

			image {
				width: 40rpx;
				height: 36rpx;
			}
		}
	}

	.icon-xiangzuo {
		color: #000;
		font-weight: bold;
		font-size: 40rpx;
		// width: 100rpx;
		height: 56rpx;
		line-height: 54rpx;
		// position: absolute;
		// top: 50%;
		// left: 16rpx;
		// transform: translateY(-50%);
	}

	.icon-xiangzuo.on {
		color: #fff;
	}

	.search-box {
		width: 484rpx;
		height: 70rpx;
		opacity: 1;
		border-radius: 36rpx;
		background: rgba(255, 255, 255, 1);
		padding: 12rpx 32rpx;

		.city {
			margin-right: 26rpx;
			padding-right: 32rpx;
			position: relative;
			font-size: 16px;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			&::after {
				display: block;
				content: '';
				width: 26rpx;
				height: 16rpx;
				background-image: url('/static/images/city_sanjiao.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -8rpx;
			}
		}

		.search-ipt {
			color: rgba(166, 166, 166, 1);

			text {
				padding: 0 16rpx 0 26rpx;
				border-left: 1px solid rgba(229, 229, 229, 1);
			}
		}
	}

	.nav-box {
		padding: 26rpx 0 0;
		background: #ffffff;

		.longTab {
			width: 100%;
			color: #000;

			/* #ifdef H5 */
			// padding-bottom: 20rpx;
			/* #endif */
			/* #ifdef MP */
			// padding-top: 12rpx;
			// padding-bottom: 12rpx;
			/* #endif */
			.longItem {
				height: 50upx;
				display: inline-block;
				line-height: 50upx;
				text-align: center;
				font-size: 32rpx;

				&.click {
					font-weight: bold;
					color: #EE212D;
				}
			}

			.underlineBox {
				height: 3px;
				width: 20%;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .5s;

				.underline {
					width: 33rpx;
					height: 4rpx;
					background-color: #EE212D;
				}
			}
		}
	}

	// 列表
	.list {
		padding: 32rpx;

		.item {
			margin-bottom: 14rpx;
			border-radius: 10rpx;
			background: #ffffff;
			padding: 24rpx;
			overflow: hidden;

			.top-info {
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}
	}

	// 全部列表
	.all {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 216rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 216rpx;

				.title {
					width: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.sell-price {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}

	// 求购列表
	.need-buy {
		.title {
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 56, 56, 1);
		}

		.goods-tag {
			margin-top: 18rpx;

			.tag {
				white-space: nowrap;
				border-radius: 4px;
				background: rgba(255, 232, 234, 1);
				padding: 6rpx 12rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.tag:last-child {
				margin-right: 0;
			}
		}

		.contact-info {
			width: 70%;

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.name {
				width: calc(100% - 100rpx);
				height: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				margin-left: 24rpx;
			}
		}

		.visit-l {
			width: 30%;

			.visit-num {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				margin-bottom: 12rpx;
			}

			.visit-btn {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 33, 45, 1);
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.distance {
			width: 100%;
			padding: 0 12rpx 12rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			image {
				width: 18rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		// 浏览咨询统计
		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar {
				width: 40%;
				height: 46rpx;
				position: relative;

				image {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					position: absolute;
				}
			}

			.visit-l {
				width: 60%;
				height: 46rpx;

				.visit-num {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}
			}

		}

	}

	// 广告位
	.adver {
		height: 122rpx;
		margin: 32rpx;
		border-radius: 10rpx;
		overflow: hidden;

		swiper,
		swiper-item {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			width: 100%;
			height: 100%;
			background-color: #ffc83c;
		}
	}
</style>